import React, {Component} from 'react';
import {Dimensions, FlatList, Image, StyleSheet, Text, View, AsyncStorage, Alert, TouchableOpacity} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import FetchUtils from './../utils/FetchUtils'
import utils from './../utils/utils';

export default class StyleManProfileEvaluate extends Component {

    constructor(props) {
        super(props);
        this.state = {
            datas: this.props.datas,
            userId: this.props.userId,
            page: this.props.datas.number,
            size: this.props.datas.size,
            loadingStatus: false,
            datasLastStatus: this.props.datas.last,
        }
    }

    /*生成评价列表*/
    makeItem(itemData) {
        return (
            <View key={itemData.id}>
                <View style={styles.EvaluateItem}>
                    <Image style={styles.imgItem}
                           source={{uri: utils.qiniuUrl + itemData.evaHeaderImg + utils.qiniu200Url}}/>
                    <View style={styles.EvaluateItemText}>
                        <Text style={styles.nameText}>{itemData.evaUsername}</Text>
                        <Text style={styles.markText}>{itemData.evaMsg}</Text>
                    </View>
                </View>
                <View style={styles.lineBottom}/>
            </View>
        )
    }

    /*生成列表key*/
    _keyExtractor = (item, index) => item.id;
    /*下拉刷新*/
    toRefresh = () => {
        AsyncStorage.getItem("XToken").then((xToken) => {
            if (!this.state.datasLastStatus) {
                this.setState({loadingStatus: true});
                let params = {userId: this.state.userId, page: this.state.page + 1, size: this.state.size,};
                FetchUtils.getWithHeader(utils.apiUrl + '/user/styleUserProfileEval', xToken, params, (res) => {
                    console.log(res)
                    if (res.code == 200) {
                        let oldEvalContent = this.state.datas.content;
                        let evalContent = res.apiData.content;
                        let newEval = {
                            first: res.apiData.first,
                            last: res.apiData.last,
                            number: res.apiData.number,
                            numberOfElements: res.apiData.numberOfElements,
                            size: res.apiData.size,
                            sort: res.apiData.sort,
                            totalElements: res.apiData.totalElements,
                            totalPages: res.apiData.totalPages,
                            content: oldEvalContent.concat(evalContent),
                        }
                        this.setState({
                            datas: newEval,
                            datasLastStatus: res.apiData.last,
                            page: res.apiData.number,
                            size: res.apiData.size,
                            loadingStatus: false,
                        })

                    } else {
                        Alert.alert("警告", res.apiData);
                        this.setState({
                            loadingStatus: false,
                        })
                    }
                })
            }
        });
    }

    render() {

        return (
            <View style={styles.pageView}>
                <Spinner visible={this.state.loadingStatus} textContent={""} textStyle={{color: '#FFF'}}/>
                <FlatList
                    data={this.state.datas != null ? this.state.datas.content : null}
                    renderItem={({item}) => this.makeItem(item)}
                    keyExtractor={this._keyExtractor}
                />
                {
                    !this.state.datasLastStatus ?
                        <TouchableOpacity style={styles.butStyle} onPress={this.toRefresh.bind(this)}>
                            <Text>查看更多评论</Text>
                        </TouchableOpacity>
                        :
                        null
                }

            </View>
        );
    }
};
const styles = StyleSheet.create({
    pageView: {
        flex: 1,
    },
    EvaluateItem: {
        height: utils.autoheight(75),
        width: utils.screenWidth,
        flexDirection: 'row',
        paddingTop: utils.autoheight(10),
        paddingLeft: utils.autoWidth(10),
        paddingRight: utils.autoWidth(10),
    },
    imgItem: {
        height: utils.autoWidth(55),
        width: utils.autoWidth(55),
        borderRadius: utils.autoWidth(27.5),
        marginRight: utils.autoWidth(10),
        marginBottom: utils.autoWidth(10),
    },
    EvaluateItemText: {
        flex: 1,
    },
    lineBottom: {
        height: utils.autoheight(0.5),
        width: utils.autoWidth(300),
        backgroundColor: '#D5D5D5',
        alignSelf: 'center',
    },
    nameText: {
        fontSize: utils.setSpText(11),
        color: '#A0A0A0',
    },
    markText: {
        fontSize: utils.setSpText(13),
        color: '#010101',
    },
    butStyle: {
        height: utils.autoheight(75),
        alignItems: 'center',
        justifyContent: 'center'
    }
});